<template>
  <a-drawer width="600" :title="title" :visible="open" @close="handleClose">
    <a-form-model ref="formRef" :model="form" :rules="rules" :labelCol="{span: 4}" :wrapperCol="{span: 20}">
      <a-form-model-item label="父菜单" prop="parentId">
        <a-tree-select
          show-search
          treeNodeFilterProp="title"
          :treeDefaultExpandedKeys="[0]"
          v-model="form.parentId"
          :tree-data="treeList"
          :dropdown-style="{maxHeight: '400px', overflow: 'auto'}"
          :replaceFields="{children:'children', title: 'menuName', key:'id', value: 'id'}"
          placeholder="请选择父级菜单"/>
      </a-form-model-item>
      <a-form-model-item label="菜单类型" prop="menuType">
        <a-radio-group :default-value="form.menuType" v-model="form.menuType" button-style="solid">
          <a-radio-button value="M">目录</a-radio-button>
          <a-radio-button value="C">菜单</a-radio-button>
          <a-radio-button value="F">按钮</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="菜单名称" prop="menuName">
        <a-input v-model="form.menuName" placeholder="请输入菜单名称" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sort">
        <a-input v-model="form.sort" placeholder="请输入排序" type="number" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="菜单图标" prop="icon" v-if="form.menuType == 'M' || form.menuType == 'C'">
        <icon-selector @change="handleIconChange"/>
<!--        <a-input v-model="form.icon" placeholder="请输入菜单图标" allow-clear/>-->
      </a-form-model-item>
      <a-form-model-item label="是否外链" prop="isFrame" v-if="form.menuType == 'M' || form.menuType == 'C'">
        <a-radio-group :default-value="form.isFrame" v-model="form.isFrame" button-style="solid">
          <a-radio-button :value="1">是</a-radio-button>
          <a-radio-button :value="2">否</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="路由地址" prop="path" v-if="form.menuType == 'M' || form.menuType == 'C'">
        <a-input v-model="form.path" placeholder="请输入路由地址" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="菜单状态" prop="visible" v-if="form.menuType == 'M' || form.menuType == 'C'">
        <a-radio-group :default-value="form.visible" v-model="form.visible" button-style="solid">
          <a-radio-button :value="1">显示</a-radio-button>
          <a-radio-button :value="2">隐藏</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否缓存" prop="isCache" v-if="form.menuType == 'C'">
        <a-radio-group :default-value="form.isCache" v-model="form.isCache" button-style="solid">
          <a-radio-button :value="1">缓存</a-radio-button>
          <a-radio-button :value="2">不缓存</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="组件路径" prop="component" v-if="form.menuType == 'C'">
        <a-input v-model="form.component" placeholder="请输入组件路径" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="权限标识" prop="perms" v-if="form.menuType == 'C' || form.menuType == 'F'">
        <a-input v-model="form.perms" placeholder="请输入权限标识" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="路由参数" prop="query" v-if="form.menuType == 'C'">
        <a-input v-model="form.query" placeholder="请输入路由参数" allow-clear/>
      </a-form-model-item>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</a-button>
          <a-button type="dashed" @click="handleClose">取消</a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>
<script>
import {listSysPermission, getSysPermission, saveSysPermission, updateSysPermission} from '@/api/system/sysPermission'
import IconSelector from '@/components/IconSelector/IconSelector.vue'

export default {
  components: { IconSelector },
  data() {
    return {
      submitLoading: false,
      title: '',
      open: false,
      // 表单
      form: {},
      rules: {
        parentId: [{required: true, trigger: ['blur', 'change'], message: '请选择父菜单'}],
        menuName: [{required: true, trigger: ['blur', 'change'], message: '请输入菜单名称'}],
        path: [{required: true, trigger: ['blur', 'change'], message: '请输入路由地址'}],
        component: [{required: true, trigger: ['blur', 'change'], message: '请输入组件路径'}],
        query: [{required: false, trigger: ['blur', 'change'], message: '请输入路由参数'}],
        isFrame: [{required: true, trigger: ['blur', 'change'], message: '请选择是否外链'}],
        isCache: [{required: true, trigger: ['blur', 'change'], message: '请选择是否缓存'}],
        menuType: [{required: true, trigger: ['blur', 'change'], message: '请选择菜单类型'}],
        visible: [{required: true, trigger: ['blur', 'change'], message: '请选择菜单状态'}],
        perms: [{required: false, trigger: ['blur', 'change'], message: '请输入权限标识'}],
        icon: [{required: true, trigger: ['blur', 'change'], message: '请选择菜单图标'}],
        sort: [{required: false, trigger: ['blur', 'change'], message: '请输入显示顺序'}]
      },
      treeList: []
    }
  },
  methods: {
    /** 点击关闭 */
    handleIconChange (icon) {
      this.form.icon = icon
      console.log('change Icon', icon)
    },
    /** 点击关闭 */
    handleClose() {
      this.reset()
      this.open = false
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        parentId: undefined,
        menuName: undefined,
        path: undefined,
        component: undefined,
        query: undefined,
        isFrame: 1,
        isCache: 1,
        menuType: 'M',
        visible: 1,
        perms: undefined,
        icon: undefined,
        sort: undefined
      }
      listSysPermission().then(res => {
        this.treeList = [{id: 0, menuName: '主目录', children: this.handleTree(res.data)}]
      })
    },
    /** 点击新增 */
    handleAdd() {
      this.reset()
      this.title = '添加权限'
      this.open = true
    },
    /** 点击新增下级 */
    handleAddNext(row) {
      this.handleAdd()
      this.form.parentId = row.id
    },
    /** 点击修改 */
    handleUpdate(row) {
      this.reset()
      getSysPermission(row.id).then(res => {
        this.title = '修改权限'
        this.open = true
        this.$nextTick(() => {
          this.form = res.data
        })
      })
    },
    /** 点击保存 */
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.form.id && this.form.id > 0) {
            updateSysPermission(this.form).then(res => {
              this.$message.success(res.msg)
              this.handleClose()
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            saveSysPermission(this.form).then(res => {
              this.$message.success(res.msg)
              this.handleClose()
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    }
  }
}
</script>
